﻿ 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
 
<title>Home</title>
<link type="text/css" href="${rc.getContextPath()}/front/css/all.css" rel="stylesheet" />
<style>
/*广播广告*/

#slide { position: relative; margin: 0px auto; width: 100%; height: 470px; overflow: hidden; }
#slide .slide-lists { width: 100%; height: 100%; overflow: hidden; }
#slide .slide-lists ul { position: absolute; left: 0; width: 100000px; }
#slide .list { float: left; height: 430px; }
/*#slide .list1 { background: url(${rc.getContextPath()}/front/images/temp2.jpg) center top no-repeat; }
#slide .list2 { background: url(${rc.getContextPath()}/front/images/temp3.gif) center top no-repeat; }
#slide .list3 { background: url(${rc.getContextPath()}/front/images/temp4.gif) center top no-repeat; }*/
#slide .slide-btns { position: absolute; left: 50%; bottom: 0; }
#slide .slidebtn { float: left; background: #c7c7c7; width: 15px; height: 15px; border-radius: 8px; margin-right: 10px; cursor: pointer; }
#slide .slide-btns .cur { background: #424379; }
.icon-large { }
.slidesjs-previous { display: block; cursor: pointer; position: absolute; height: 70px; width: 25px; top: 170px; z-index: 15; left: 40px;    }
.slidesjs-next { display: block; cursor: pointer; position: absolute; height: 70px; width: 25px; top: 170px; z-index: 15; right: 40px;  }
/*中间部分*/
.aboutdiv { width: 218px; height: 250px; float: left; margin-top: 60px; margin-left: 54px; margin-right: 54px; text-align: left; }
.aboutdiv h2 { font-size: 23px; color: #000; font-weight: bold; line-height: 30px; }
.aboutdiv span { height: 120px; font-size: 13px; color: #818280; display: block; line-height: 20px; }
.button { float: right; cursor: pointer; color: #a10000; padding-right: 20px; }
/*注册框*/
.amLoginWrapper { clear: both; overflow: hidden; padding-top: 18px; text-align: left; height: 400px; }
.leftSideLogin { clear: left; float: left; margin-left: 150px; width: 462px; }
.leftSideLogin h1 { border-bottom: 0 solid #FFFFFF; color: #303326; font-size: 26px; font-weight: 100; margin-bottom: 18px; text-transform: none; }
.leftSideLogin p { margin: 0; padding: 0; }
.leftSideLogin form p { position: relative; }
.leftSideLogin label { color: #414141; font-size: 13px; left: 35px; position: absolute; top: 26px; }
.leftSideLogin input.login.username { background: url("${rc.getContextPath()}/front/images/user.png") no-repeat scroll -2px -2px; border: 0 none; height: 46px;  line-height:46px;
font-size: 12px; width: 288px; padding-left: 34px; display: block; }
.leftSideLogin p.loginHint { color: #9EA7B3; font-size: 10px; margin-bottom: 10px; word-spacing: -1px; }
.leftSideLogin input.login.password { background: url("${rc.getContextPath()}/front/images/pass.png") no-repeat scroll -2px -2px; border: 0 none; height: 46px;  line-height:46px;
font-size: 12px; width: 288px; padding-left: 34px; display: block; }
.leftSideLogin p.loginHint { color: #9EA7B3; font-size: 10px; margin-bottom: 10px; word-spacing: -1px; }
input.loginimage { background: url("${rc.getContextPath()}/front/images/secure-login.png"); border: 0 solid #FFFFFF; cursor: pointer; height: 53px; margin-left: -5px; width: 299px; color: #fff; font-size: 18px; font-weight: bold; }
.rightSideLogin { border-left: 1px solid #CECECE; clear: right; float: left; margin-bottom: 18px; padding-left: 18px; width: 290px; }
.rightSideLogin h2 { color: #303326; font-family: "Trebuchet", Trebuchet MS, serif; font-size: 18px; padding-bottom: 8px; }
.rightSideLogin p { color: #303326; font-size: 11px; line-height: 18px; margin-bottom: 10px; }
.pop-box { box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); width: 408px; z-index: 90; text-align: left; border-radius: 8px; -webkit-border-radius: 8px; }
.pop-main { background-color: #FFFFFF; border: 1px solid #BBBBBB; border-radius: 8px; -webkit-border-radius: 8px; }
.pop-main .pop-hd { background-color: #F4F4F4; padding: 8px 10px; position: relative; border-top-left-radius: 8px; border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; }
.pop-main .pop-hd h3 { color: #424242; font-size: 14px; }
.pop-main .pop-hd .close { background: url(${rc.getContextPath()}/front/images/box_close.gif); height: 13px; position: absolute; right: 8px; top: 10px; width: 11px; z-index: 2; }

a.button {
    background: url("/images/common2.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #b7c8d9;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    color: #444444;
    display: -moz-inline-stack;
    float: left;
    height: 26px;
    line-height: 26px;
    margin-right: 10px;
    outline: medium none;
    padding: 0 16px;
    text-shadow: 1px 1px #ffffff;
}
.button {
    color: #a10000;
    cursor: pointer;
    float: right;
    padding-right: 20px;
}
a {
    color: #666666;
    text-decoration: none;
}

</style>
<script type="text/javascript" src="${rc.getContextPath()}/front/js/kf.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery.js"></script>
<script>
		//广告居中
		$(function(){
		$("#slide div ul li").css("width",window.screen.width);
        });
        function showpopbox() {
            $(".pop-box").removeClass("Hide");
        }
        function hidepopbox() {
            $(".pop-box").addClass("Hide");
        }
		
	</script>
</head>
<body>
 <#include "${base!}/front/header.html"/>
<!--轮播广告-->
<div class="slide" id="slide">
  <div class="slide-lists">
    <ul>
    <@cms_banner_list >

      <#list home_banner_list as banner> 
      <li class="list list${banner_index+1}" style="display: block"><a    href="${banner.link!'#'}"   ><img src="${banner.url!'/front/images/temp3.gif'}" width="100%" height="430px" /></a></li>
       
       </#list>
 
    </@cms_banner_list>
    </ul>
    <a href="javascript:void(0);" class="slidesjs-previous icon-large"></a> <a href="javascript:void(0);" class="slidesjs-next icon-large"></a> </div>
  <div class="slide-btns"> <span class="slidebtn cur" data-index="0"></span> <span class="slidebtn" data-index="1"></span> <span class="slidebtn" data-index="2"></span> </div>
</div>
<script type="text/javascript">
	   $(function(){
          var slideJS = (function(){
              var swrap = $("#slide"),
                      biglists = swrap.find(".list"),
                      slidelist = swrap.find(".slide-lists"),
                      liWidth = biglists.width(),
                      btnlists=swrap.find(".slidebtn"),
					  previous = swrap.find(".slidesjs-previous"),
					  next=swrap.find(".slidesjs-next"),
                      flag = true,
                      interval = 3000,
                      TimeList,
                      N=0;
              function changeSlide(i){
      
                  var sumleft = - (i) * liWidth;
                  slidelist.find("ul").animate({left: sumleft})
                  btnlists.eq(i).addClass("cur").siblings().removeClass("cur");
                  N = i;
              }
      
      
              function timeOut(){
                  TimeList = setTimeout(function() {
                      if (flag) {
                          N++;
                          if (N == 3) {
                              N = 0;
                          }
                          btnlists.eq(N).trigger("click");
                      }
                      TimeList = setTimeout(arguments.callee, interval);
                  }, interval);
              }
      
      
              return {
                  init : function(){
      
                      btnlists.on("click mouseenter ",function(){
                          var now = $(this),i = now.data("index");
                          changeSlide(i);
                      }).eq(N).trigger("click");
      
                      swrap.live("mouseover",function(){
                          clearTimeout(TimeList);
                          TimeList = null;
                      })
      
                      swrap.live("mouseout",function(){
                          timeOut();
                      });
      
	  				  previous.on("click ",function(){
						  var now = $(".slide-btns").find(".cur"),i = now.data("index")-1;
						  if(i<0) i=2;
                          changeSlide(i);
                      });
					  next.on("click ",function(){
						  var now = $(".slide-btns").find(".cur"),i = now.data("index")+1;
						  if(i>2) i=0;
                          changeSlide(i);
                      });
                      timeOut();
                  }
              }
          })();
          slideJS.init();
		  });
       </script>
<div class="main"> 
  <!--三个菜单-->
  <div class="wrap">
    <div class="aboutdiv">
      <h2>About La Luna</h2>
      <span> <font color="#F78F07">La Luna</font> is an organization gathering people from all over the world who are professionals in their career, but with a similar pursuit-enjoying a wonderful life together... </span> <a href="about.html" class="button">​More>>​</a> </div>
    <div class="aboutdiv">
      <h2>Member Benefits</h2>
      <span> While enjoying lots of taylor-made benefits from <font color="#F78F07">La Luna</font> selected merchants, you can also meet La Luna members in different <font color="#F78F07">La Luna</font> events... </span> <a href="card.html" class="button">​More>></a> </div>
    <div class="aboutdiv">
      <h2>Follow us</h2>
      <span> <img src="${base!}${(site.qrCode)!}" height="100px" /> </span> <a href="about.html" class="button">More>>​</a>​ </div>
  </div>
</div>
<#include "${base!}/front/footer.html"/>
<!--微信-->
<div id="KeFuDiv" class="KeFuDiv" style="display:none">
  <div class="KeFuList" ><img width="100px" src="${base!}${(site.qrCode)!}" border="0" usemap="#Map" style="cursor:move;" onMouseDown="MoveDiv(KeFuDiv,event);" title="拖动"> </div>
  <a class="service_icon" onClick="$('.KeFuList').toggle();" title="关闭"><div class="erweima">二维码</div></a>

  <!--<map name="Map" id="Map">
    <area shape="circle" coords="105,10,8" href="javascript:" onClick="KeFuDiv.style.display=&#39;none&#39;;" title="关闭">
  </map>--> 
</div>
<script>
		//微信初始位置
		gID("KeFuDiv").style.left = document.documentElement.clientWidth - gID("KeFuDiv").offsetWidth-10 +"px";

		gID("KeFuDiv").style.top = "400px";
		//开始滚动
		ScrollDiv('KeFuDiv');
</script>
</body>
</html>